import React, {Component} from 'react'
import {Modal, Button, Icon, message} from 'antd'
import Cropper from 'cropperjs'
import {upload, eventEmitter} from '../common/js/utils'
import dataURLtoBlob from 'blueimp-canvas-to-blob'
import 'cropperjs/dist/cropper.css'

export default class Face extends Component {

  state = {
    visible: false
  }

  show = () => {
    this.setState({
      visible: true
    }, () => {
      setTimeout(this.renderCropper, 50)
    })
  }

  handleClose = () => {}

  handleCancel = () => {
    this.setState({
      visible: false,
      loading: false
    })
  }

  componentWillMount() {
    this.props.onRef && this.props.onRef(this)
  }

  renderCropper = () => {
    const options = {
      aspectRatio: 1,
      preview: '.face-img-preview',
      minCropBoxWidth: 80,
      movable: false
    }
    this.crop = new Cropper(document.getElementById('faceId'), options)
  }

  doUpload = () => {
    if (!this.crop) return
    const data = this.crop.getCroppedCanvas({
      width: 200,
      height: 200
    })
    const handleBlob = blob => {
      const form = new FormData()
      form.append('file', blob)
      this.uploadToServer(form)
    }
    if (data.toBlob) {
      data.toBlob(handleBlob)
    } else {
      const blob = dataURLtoBlob(data.toDataURL())
      handleBlob(blob)
    }
  }

  uploadToServer = data => {
    if (this.state.loading) return
    upload('/api/users/face', data, {}, loading => {
      this.setState({
        loading
      })
    }).then(res => {
      if (res.result === 1) {
        message.success('上传成功')
        eventEmitter.emit('userInfo')
        this.handleCancel()
      }
    })
  }

  handleImg = e => {
    const file = e.target.files[0]
    if (file && this.crop) {
      if (this.tempImg) {
        URL.revokeObjectURL(this.tempImg)
      }
      this.tempImg = URL.createObjectURL(file)
      this.crop.replace(this.tempImg)
    }
  }

  render() {
    const {face} = this.props

    return (
      <Modal
        footer={null}
        afterClose={this.handleClose}
        visible={this.state.visible}
        onCancel={this.handleCancel}
        destroyOnClose
        centered
        width={520}
        maskClosable={false}
        bodyStyle={{
          padding: 0
        }}
      >
        <div className="faceModal" >
          <div className="face-left">
            <img src={face} id="faceId" alt="" />
          </div>
          <div className="face-right">
            <div className="face-img-preview" style={{
              width: '125px',
              height: '125px'
            }} />
            <div className="face-img-preview" style={{
              width: '75px',
              height: '75px',
              margin: '0 0 0 20px'
            }} />
            <div className="btn-box" >
              <Button>
                <label htmlFor="imgFile">
                  <Icon type="upload" /> 选择图片
                </label>
              </Button>
              <Button loading={this.state.loading} type="primary" onClick={this.doUpload} style={{
                margin: '0 0 0 15px'
              }}>上传</Button>
              <Button
                onClick={this.handleCancel}
                style={{
                  margin: '0 0 0 10px'
                }}
              >取消</Button>
            </div>
          </div>
          <input
            style={{
              width: 0,
              height: 0,
              overflow: 'hidden'
            }}
            type="file"
            accept="image/*"
            onChange={this.handleImg}
            id="imgFile"
          />
        </div>
      </Modal>
    )
  }
}